<div id="amdLayout" class="easyui-layout" data-options="fit:true">
    <div class="amdTitle" data-options="region:'north'"></div>
    <div data-options="region:'east',split:false,title:'目录'" style="padding:5px 1px">
        <ul id="amdTree" class="easyui-tree" data-options="method:'get',animate:true,lines:true"></ul>
    </div>
    <div data-options="region:'center'">
        <div id="amdCxt"></div>
    </div>
</div>

<script type="text/javascript">
$(function() {
    let treeObj = $('#atree').tree('getSelected');
    let title = treeObj.text;
    let mdUrl = treeObj.md;
    let jsonUrl = mdUrl.replace('.md', '.json');

    $('.amdTitle').html(title);
    $.get(jsonUrl, function(dataJson) {
        amdMenuStatus(dataJson.menu);
    });

    $.get(mdUrl, function(markdown) {
        editormd.markdownToHTML('amdCxt', {
            markdown        : markdown,
            htmlDecode      : 'amdCxt',
            tocm            : true,
            emoji           : true,
            taskList        : true,
            tex             : true,
            flowChart       : true,
            sequenceDiagram : true
        });
    });
});

function amdMenuStatus(menu) {
    let layoutId = '#amdLayout';
    if ('show' == menu.status) {
        $(layoutId).layout('panel', 'east').panel('resize', { width: menu.width });
        $(layoutId).layout('resize');
    } else if ('hide' == menu.status) {
        $(layoutId).layout('panel', 'east').panel('resize', { width: menu.width });
        $(layoutId).layout('resize');
        $(layoutId).layout('collapse', 'east');
    } else if ('remove' == menu.status) {
        $(layoutId).layout('remove', 'east');
        $(layoutId).layout('resize');
    }
    if ('show' == menu.status || 'hide' == menu.status) {
        $('#amdTree').tree({
            data: menu.data,
            onClick: function(node) {
                document.querySelector("[name='" + node.name + "']").scrollIntoView(true);
            }
        });
    }
}
</script>